<template>
  <div class="land-live-msg">
    <img class="report-img" v-show="isReport" :src="sysInfo.icon +'?x-oss-process=image/resize,m_fixed,h_70,w_70'">
    <div class="report-box" v-show="isReport">
      <p>{{sysInfo.name}}</p>
      <img @click="reportBtn" src="../../../../assets/images/report-img.png">
    </div>
    <div :class="[liveMsgBoxClass]" ref="msgContentBox" :id="noNavLength == 'noNav'?'no-nav-msg-box':'msg-box'">
      <ul v-if="$channel != 'zhxyk'" class="sysInfo-ul">
        <li class="msg-li-li">
          <div class="li-msg-left">
            <img @click="reportLive($event)" :src="roomInfo.roomInfo.userAnchor.headImg +'?x-oss-process=image/resize,m_fixed,h_70,w_70'">
          </div>
          <div class="li-msg-right">
            <p class="nickBox"><span class="nikeNameRuan">{{roomInfo.roomInfo.userAnchor.nickname}}</span><span id="comment-imgicon"></span></p>
            <div class="connect-boxText" id="live-red">
              <div id="live-top-msg" v-html='roomInfo.roomInfo.topWord'></div>
              <span class="icon-box" @click="clickToggle">
                <Iconfont v-show="isEllipsis && !isShow" iconClass="iconfont iconspread-line" />
                <Iconfont v-show="isEllipsis && isShow" iconClass="iconfont iconshouqi-copy" />
              </span>
            </div>

          </div>
        </li>
      </ul>
      <div v-if='isNoComment' class="no-comment-box">
        <p class="no-comment"></p>
      </div>
      <ul class="msg-content-class" ref="msgContent" @click="redPacketHistoryClick($event)">
        <!--<li class="msg-li-li">
          <div class="li-msg-left">
            <img onerror="imgError()" src="../../../../../static/logo-w.png">
          </div>
          <div class="li-msg-right">
            <p class="nickBox"><span class="nikeNameRuan">游客1234</span><span class="liveTimeRuan">09-24  17:58</span></p>
            <div class="connect-boxText">精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频</div>
          </div>
        </li>-->
      </ul>
    </div>
    <div :class="['quick-message',{'quickMessage-zxjtqh-ios':$channel=='zxjtqh' && getPlatform=='app' && isIos}]"  :style= "{width:$store.state.isMobile ? '100%' : '400px'}" v-if="quickMessageList.length">
      <ul>
      	<li v-for="(item,index) in quickMessageList" :key="index" @click="clickMessage(item)">{{item}}</li>
      </ul>
    </div>
    <LsFooter :roomInfo="roomInfo" :isPublic='isPublic' @formChildMsg='formChildData' :quickMessage="quickMessage"/>
  </div>
</template>

<script>
  import msyhUnify from '@/assets/images/msyh/msyh-special.png'; //民生银行固定直播间 固定头像
  import LsFooter from "./lsFooter.vue"; //底部组件
  export default {
    props: {
      noNavLength: String, //noNav  没有nav
      roomInfo: Object,
      imMsgItem: Object, //im消息
      redPacketData: Object, //红包消息
      imOfficalMsgItem: Object, //小助手
      imReplyMsgItem: Object, //小助手回复
      redPacketMsgData: Object, //红包消息
      socketLoveMsg: Object, //点赞时时消息
      socketGiftMsg: Object, //送礼时时消息
      isPublic: Boolean, //房间是否公开
    },
    components: {
      LsFooter, //底部组件
    },
    data() {
      return {
        quickMessageList:[], //快捷消息回复
        quickMessage:"",//选中的快捷消息
        roomId: this.$route.params.roomid,
        pageId: ' ', //分页记录的锁定的id
        fenYePage: 1, //分页页数  从1开始
        fenYeSwitch: true, //分页开关
        liveMsgBoxClass: '',
        scrollSwitch: true, //滚动开关
        totalPage: '', //总页数
        redPacketMsgData: this.redPacketMsgData, //红包消息
        isNoComment: false, //是否有评论
        currentUn: this.$store.state.userInfo.un, //当前用户un
        isEllipsis: false, //置顶留言是否显示了省略号
        isShow: true, //置顶留言展开与收起
        topMsgText: '', //保留收起样式
        isReport: false, //举报dom
        getPlatform:fun.getPlatform(),
        isIos,
        riskWarnTencent: '「温馨提示：请您注意本次会议的参会人员范围，严禁将内部会议对外转发，白名单会议仅限受邀的适当性匹配客户参会。路演内容仅供参考，不构成投资操作建议。金融产品过往业绩不代表未来，市场有风险，投资需谨慎，参与投资前请先仔细阅读产品合同书和风险揭示书。」'
      }
    },
    computed: {
      sysInfo() {
        return this.$store.state.SysOrgInfo;
      },
      isTencentLive() {
				return this.roomInfo.roomInfo.partnerType == 12
			}
    },
    watch: {
      '$store.state.globalMask.isShow'() {
        if (!this.$store.state.globalMask.isShow) {
          this.isReport = false;
        }
      },
      imOfficalMsgItem(data) {
        this.establishOfficalDom(data)
      },
      imReplyMsgItem(data) {
        this.imReplyMsg(data)
      },
      imMsgItem(cur) {
        this.establishDom(cur)
      },
      redPacketMsgData() {
        this.renderHbDom()
      },
      socketLoveMsg(dataObj) {
        this.renderLoveDom(dataObj)
      },
      socketGiftMsg(dataObj) {
        this.renderGiftDom(dataObj)
      }
    },
    created() {
      //console.log(this.roomInfo.roomInfo.topWord)
      if (this.noNavLength == 'noNav') {
          this.liveMsgBoxClass = 'no-nav'
      } else {
          this.liveMsgBoxClass = 'live-msg-box';
      }
    },
    mounted() {
      if(window.topmargin && this.$channel=='zxjtqh'){//仅app才会有window.topmargin
      let msgBox;
       if(this.noNavLength =='noNav'){//留言区域是否有导航
               msgBox = document.getElementById('no-nav-msg-box');
               fun.setBarHeight(msgBox,window.topmargin*2 + 299,true);
        }else{
               msgBox = document.getElementById('msg-box');
              fun.setBarHeight(msgBox,window.topmargin*2 + 324,true);
           }  
      }
      this.getRoomComment() //历史留言
      if(this.$channel!='zhxyk'){
        this.topMsgStyle() //置顶留言样式
      }
      let _this = this;
      _this.$refs.msgContentBox.onscroll = function() {
        let scrollTop = _this.$refs.msgContentBox.scrollTop;
        let windowHeight = _this.$refs.msgContentBox.clientHeight;
        let scrollHeight = _this.$refs.msgContentBox.scrollHeight - 1;
        //console.log('scrollTop:'+scrollTop+'windowHeight:'+windowHeight+'scrollHeight:'+scrollHeight)
        if (scrollTop + windowHeight >= scrollHeight && _this.scrollSwitch == true && _this.fenYePage < _this
          .totalPage) {
          _this.scrollSwitch = false;
          _this.fenYePage++;
          _this.$http.get("/h5live/historyMessage?roomId=" + _this.roomId + "&id=" + _this.pageId + "&page=" + _this
            .fenYePage).then(
            res => {
              if (res.data.code == "000000") {
                let dataMsg = res.data.data.msg.items;
                //type 0是留言  1是点赞  2是红包  3是答题  4是问卷  5是投票  6小助手回复  7送礼
                dataMsg.forEach(function(ele, index) {
                  //if(ele.type == '0'){}
                  let li = document.createElement("li");
                  li.className = "msg-li-li";
                  let leftBox = document.createElement("div");
                  leftBox.className = "li-msg-left";
                  let img = document.createElement("img");
                  if (_this.roomId == "4335" || _this.roomId == "4336" || _this.roomId == "4350" || _this
                    .roomId == "4351" || _this.roomId == "4353" || _this.roomId == "4369" || _this.roomId ==
                    "1623" || _this.roomId == "4512" || _this.roomId == "4513" || _this.roomId == "4515" ||
                    _this.roomId == "4516" || _this.roomId == "4517") { //民生银行固定直播间固定头像
                    img.src = msyhUnify
                  } else {
                    img.src = ele.avator && ele.avator != null && ele.avator || imgTx;
                  }
                  img.onerror = window.imgError;
                  leftBox.appendChild(img);
                  li.appendChild(leftBox);
                  let rightBox = document.createElement("div");
                  rightBox.className = "li-msg-right";
                  let p = document.createElement("p");
                  p.className = "nickBox";
                  let span1 = document.createElement("span");
                  span1.className = "nikeNameRuan";
                  if (_this.roomId == "4335" || _this.roomId == "4336" || _this.roomId == "4350" || _this
                    .roomId == "4351" || _this.roomId == "4353" || _this.roomId == "4369" || _this.roomId ==
                    "1623" || _this.roomId == "4512" || _this.roomId == "4513" || _this.roomId == "4515" ||
                    _this.roomId == "4516" || _this.roomId == "4517") { //民生银行固定直播间固定昵称
                    span1.innerText = '顶顶';
                  } else {
                    span1.innerText = ele.un == _this.roomInfo.roomInfo.anchor ?'主播':ele.nickName;
                  }
                  let span2 = document.createElement("span");
                  span2.className = "liveTimeRuan";
                  span2.innerText = ele.addTime;
                  p.appendChild(span1);
                  p.appendChild(span2);
                  rightBox.appendChild(p);
                  let contentBox = document.createElement("div");
                  contentBox.className = 'connect-boxText';
                  if (ele.type == '1') { //点赞
                    contentBox.className = "nick-name";
                    contentBox.innerText = `送出了${ele.message}个赞`;
                    if (ele.un == _this.currentUn) {
                      li.className = "msg-li-li highlight-me";
                      let spanMy = document.createElement("span");
                      spanMy.className = "my-tip";
                      spanMy.innerText = '我';
                      p.insertBefore(spanMy, span2)
                    }
                  } else if (ele.type == '2') { //红包
                    let hongBaoHtml = document.createElement("div");
                    hongBaoHtml.className = 'hongbaohtml';
                    hongBaoHtml.setAttribute('datahbnickname', ele.nickName);
                    hongBaoHtml.setAttribute('datahbid', JSON.parse(ele.message).packetNo);
                    hongBaoHtml.setAttribute('datahbtitle', JSON.parse(ele.message).packetDesc)
                    let p = document.createElement('p');
                    p.className = 'pTitleClass'
                    p.innerText = JSON.parse(ele.message).packetDesc;
                    hongBaoHtml.appendChild(p);
                    contentBox.appendChild(hongBaoHtml)
                  } else if (ele.type == '6' && _this.isJSON(ele.message)) { //官方
                    let itemEle = JSON.parse(ele.message.replace(/\n/g, "\\n").replace(/\r/g, "\\r"))
                    let span0 = document.createElement("span");
                    span0.className = "officialRuan";
                    if (_this.roomInfo.roomInfo.channel === "gdyh2") span0.classList.add('officialRuanGdyh2');
                    span0.innerText = '官方';
                    p.insertBefore(span0, span1);
                    contentBox.className = "connect-boxText";
                    let replyBox = document.createElement("p");
                    replyBox.className = "reply-box";
                    let replyName = document.createElement("span");
                    replyName.className = "reply-name";
                    replyName.innerHTML = '@' + itemEle.parent.nickName;
                    let replyMsg = document.createElement("span");
                    replyMsg.className = "reply-msg";
                    replyMsg.innerHTML = itemEle.msg;
                    let repliedBox = document.createElement("div");
                    repliedBox.className = "replied-box";
                    let repliedInfo = document.createElement("p");
                    repliedInfo.className = "replied-info";
                    let repliedName = document.createElement("span");
                    repliedName.className = "replied-name";
                    repliedName.innerHTML = itemEle.parent.nickName;
                    let repliedTime = document.createElement("span");
                    repliedTime.className = "replied-time";
                    repliedTime.innerHTML = itemEle.parent.addTime
                    let repliedMsg = document.createElement("p");
                    repliedMsg.className = "replied-msg";
                    repliedMsg.innerHTML = itemEle.parent.message;
                    replyBox.appendChild(replyName)
                    replyBox.appendChild(replyMsg)
                    repliedInfo.appendChild(repliedName)
                    repliedInfo.appendChild(repliedTime)
                    repliedBox.appendChild(repliedInfo)
                    repliedBox.appendChild(repliedMsg)
                    contentBox.appendChild(replyBox);
                    contentBox.appendChild(repliedBox);
                  } else if (ele.un.includes('zbzlpt') || ele.un == _this.roomInfo.roomInfo.anchor) {
                    let span0 = document.createElement("span");
                    span0.className = "officialRuan";
                    if (_this.roomInfo.roomInfo.channel === "gdyh2") span0.classList.add('officialRuanGdyh2');
                    span0.innerText = '官方';
                    p.insertBefore(span0, span1);
                    contentBox.className = "connect-boxText";
                    contentBox.innerText = ele.message;
                  } else if (ele.type == '7') { //送礼
                    contentBox.className = "connect-boxText";
                    let i = document.createElement("i");
                    i.style.color = '#eb5a6a';
                    i.innerText = ele.message;
                    contentBox.appendChild(i)
                    if (ele.un == _this.currentUn) {
                      li.className = "msg-li-li highlight-me";
                      let spanMy = document.createElement("span");
                      spanMy.className = "my-tip";
                      spanMy.innerText = '我';
                      p.insertBefore(spanMy, span2)
                    }
                  } else {
                    if (ele.un == _this.currentUn) {
                      li.className = "msg-li-li highlight-me";
                      let spanMy = document.createElement("span");
                      spanMy.className = "my-tip";
                      spanMy.innerText = '我';
                      p.insertBefore(spanMy, span2)
                    }
                    contentBox.className = "connect-boxText";
                    contentBox.innerText = fun.searchIphoneNum(ele.message);
                  }

                  rightBox.appendChild(contentBox);
                  li.appendChild(rightBox);
                  _this.$refs.msgContent.insertBefore(
                    li,
                    _this.$refs.msgContent.childNodes[_this.$refs.msgContent.childNodes.length + 1]
                  );
                });
                _this.scrollSwitch = true;
              }
            },
            err => {
              console.log(err);
            }
          );
        }
        if (_this.fenYePage == _this.totalPage && (scrollTop + windowHeight - 1 == scrollHeight)) {
          fun.toastMessage('没有更多留言~')
        }
      }
    },
    activated() {
      this.getQuickMessage(); //获取直播快捷栏消息；
    },
    methods: {
      // 快捷消息回复点击事件
      clickMessage(item){
         if (this.$store.state.isYk && window.terminal.isZxjtqhApp) {
                //游客
                  fun.ykDisposeFun();
                  return;
              } 
        this.quickMessage = item;
      },
      getQuickMessage(){
        this.$http.get("/h5live/fastReply").then(res=>{
          if(res.data.code == "000000"){
            this.quickMessageList = res.data.data;
          }
        }).catch(response => {
          console.log(response);
        });
      },
      reportBtn() { //举报按钮
      return
       this.$store.dispatch("globalMask", {
          isShow: false,
          bgColor: ''
        });
       this.$emit('formChildMsg', {type: 'report',data: {'data': '举报'}});



        // this.isReport = false;
      },
      reportLive(e) { //渲染举报Dom
        return
        this.$store.dispatch("globalMask", {
          isShow: true,
          bgColor: 'rgba(0,0,0,0.2)'
        });
        this.isReport = true;
        // let targetDomTop = e.currentTarget.getBoundingClientRect().top;
        // let targetDomLeft = e.currentTarget.getBoundingClientRect().left;
        // let reportBox = document.querySelector(".report-box");
        // let reportImg = document.querySelector(".report-img")
        // reportBox.style.top = targetDomTop + 'px';
        // reportImg.style.top = targetDomTop + 'px';
        // reportImg.style.left = targetDomLeft + 'px';

      },
      renderGiftDom(giftObj) {
        this.isNoComment = false; //沙发图
        let li = document.createElement("li");
        li.className = "msg-li-li";
        let leftBox = document.createElement("div");
        leftBox.className = "li-msg-left";
        let img = document.createElement("img");
        if (this.roomId == "4335" || this.roomId == "4336" || this.roomId == "4350" || this.roomId == "4351" || this
          .roomId == "4353" || this.roomId == "4369" || this.roomId == "1623" || this.roomId == "4512" || this.roomId ==
          "4513" || this.roomId == "4515" || this.roomId == "4516" || this.roomId == "4517") { //民生银行固定直播间固定头像
          img.src = msyhUnify;
        } else {
          img.src = giftObj.headImg || imgError;
        }
        img.onerror = window.imgError
        leftBox.appendChild(img);
        li.appendChild(leftBox);
        let rightBox = document.createElement("div");
        rightBox.className = "li-msg-right";
        let p = document.createElement("p");
        p.className = "nickBox";
        let span1 = document.createElement("span");
        span1.className = "nikeNameRuan";
        if (this.roomId == "4335" || this.roomId == "4336" || this.roomId == "4350" || this.roomId == "4351" || this
          .roomId == "4353" || this.roomId == "4369" || this.roomId == "1623" || this.roomId == "4512" || this.roomId ==
          "4513" || this.roomId == "4515" || this.roomId == "4516" || this.roomId == "4517") { //民生银行固定直播间固定昵称
          span1.innerText = '顶顶';
        } else {
          span1.innerText = giftObj.nick || giftObj.un || '';
        }
        p.appendChild(span1);
        if (giftObj.un == this.currentUn) {
          li.className = "msg-li-li highlight-me";
          let spanMy = document.createElement("span");
          spanMy.className = "my-tip";
          spanMy.innerText = '我';
          p.appendChild(spanMy)
        }
        let span2 = document.createElement("span");
        span2.className = "liveTimeRuan";
        let getTime = new Date().getTime() / 1000
        let times = this.timeFormat(getTime * 1000)
        span2.innerText = times;
        p.appendChild(span2);
        rightBox.appendChild(p)
        let connectBox = document.createElement("div");
        connectBox.className = "connect-boxText";
        let i = document.createElement("i");
        i.style.color = 'rgb(235, 90, 106)'
        i.innerText = giftObj.data;
        connectBox.appendChild(i)
        rightBox.appendChild(connectBox)
        li.appendChild(rightBox);
        this.$refs.msgContent.insertBefore(
          li,
          this.$refs.msgContent.childNodes[0]
        );

      },
      renderLoveDom(loveObj) { //socket 点赞消息
        this.isNoComment = false; //沙发图
        let li = document.createElement("li");
        li.className = "msg-li-li";
        let leftBox = document.createElement("div");
        leftBox.className = "li-msg-left";
        let img = document.createElement("img");
        if (this.roomId == "4335" || this.roomId == "4336" || this.roomId == "4350" || this.roomId == "4351" || this
          .roomId == "4353" || this.roomId == "4369" || this.roomId == "1623" || this.roomId == "4512" || this.roomId ==
          "4513" || this.roomId == "4515" || this.roomId == "4516" || this.roomId == "4517") { //民生银行固定直播间固定头像
          img.src = msyhUnify;
        } else {
          img.src = loveObj.headImg || imgError;
        }
        img.onerror = window.imgError
        leftBox.appendChild(img);
        li.appendChild(leftBox);
        let rightBox = document.createElement("div");
        rightBox.className = "li-msg-right";
        let p = document.createElement("p");
        p.className = "nickBox";
        let span1 = document.createElement("span");
        span1.className = "nikeNameRuan";
        if (this.roomId == "4335" || this.roomId == "4336" || this.roomId == "4350" || this.roomId == "4351" || this
          .roomId == "4353" || this.roomId == "4369" || this.roomId == "1623" || this.roomId == "4512" || this.roomId ==
          "4513" || this.roomId == "4515" || this.roomId == "4516" || this.roomId == "4517") { //民生银行固定直播间固定昵称
          span1.innerText = '顶顶';
        } else {
          span1.innerText = loveObj.nick || loveObj.un || '';
        }
        p.appendChild(span1);
        if (loveObj.un == this.currentUn) {
          li.className = "msg-li-li highlight-me";
          let spanMy = document.createElement("span");
          spanMy.className = "my-tip";
          spanMy.innerText = '我';
          p.appendChild(spanMy)
        }
        let span2 = document.createElement("span");
        span2.className = "liveTimeRuan";
        let getTime = new Date().getTime() / 1000
        let times = this.timeFormat(getTime * 1000)
        span2.innerText = times;
        p.appendChild(span2);
        rightBox.appendChild(p);
        let contentBox = document.createElement("div");
        contentBox.className = "connect-boxText nick-name";
        contentBox.innerText = `送出${loveObj.num}个赞`;
        rightBox.appendChild(contentBox);
        li.appendChild(rightBox);
        this.$refs.msgContent.insertBefore(
          li,
          this.$refs.msgContent.childNodes[0]
        );
      },
      renderHbDom() { //im  红包的消息
        let li = document.createElement("li");
        li.className = "msg-li-li";
        let img = document.createElement("img");
        let leftBox = document.createElement("div");
        leftBox.className = "li-msg-left";
        img.src = this.redPacketMsgData.icon;
        leftBox.appendChild(img);
        li.appendChild(leftBox);
        let rightBox = document.createElement("div");
        rightBox.className = "li-msg-right";
        let p1 = document.createElement("p");
        p1.className = "nickBox";
        let span1 = document.createElement("span");
        span1.className = "nikeNameRuan";
        span1.innerText = this.redPacketMsgData.payerOrg;
        p1.appendChild(span1);
        let span2 = document.createElement("span");
        span2.className = "liveTimeRuan";
        p1.appendChild(span2);
        span2.innerText = this.redPacketMsgData.PushTime;
        rightBox.appendChild(p1);
        let divConnectText = document.createElement("div");
        divConnectText.className = "connect-boxText";
        let div = document.createElement("div");
        div.className = "hongbaohtml";
        div.setAttribute("dataHBID", this.redPacketMsgData.orderNo);
        div.setAttribute("dataHBTitle", this.redPacketMsgData.title);
        div.setAttribute("datahbnickname", this.redPacketMsgData.payerOrg);
        var pTitle = document.createElement("p");
        pTitle.className = "pTitleClass";
        pTitle.innerText = this.redPacketMsgData.title;
        div.appendChild(pTitle);
        divConnectText.appendChild(div);
        rightBox.appendChild(divConnectText);
        li.appendChild(rightBox);
        this.$refs.msgContent.insertBefore(
          li,
          this.$refs.msgContent.childNodes[0]
        );
      },
      //历史消息抢红包
      redPacketHistoryClick(e) {

        if (e.target.nodeName.toLowerCase() == 'div' && e.target.className == "hongbaohtml" || e.target.className ==
          "hongbaohtml1") { //当点击的是红包图片
          if (this.$store.state.isYk) {
            fun.toastMessage("亲，登录后才能抢红包哦～", 3000)
            return
          }
          let hongBaoID = e.target.getAttribute("dataHBID");
          let hongBaoTitle = e.target.getAttribute("datahbtitle");
          let hongBaoOrg = e.target.getAttribute("datahbnickname");
          //this.enterType = 'redPopup';
          let hongbaoData = {
            "crtTime": "",
            "handoutTime": "",
            "icon": "",
            "money": "",
            "orderNo": hongBaoID,
            "packetStatus": "",
            "payerOrg": hongBaoOrg,
            "redNum": "",
            "roomId": "",
            "title": hongBaoTitle,
            "zbAct": "",
          }
          this.$emit('formChildMsg', {
            type: 'clickMessageLiHbData',
            data: {
              'hbData': hongbaoData
            }
          })
          e.target.className = "hongbaohtml1";
        } else if (e.target.nodeName.toLowerCase() == 'p' && e.target.className == "pTitleClass") { //当点击的是红包标题
          if (this.$store.state.isYk) {
            fun.toastMessage("亲，登录后才能抢红包哦～", 3000)
            return
          }
          let parentHongBaoID = e.target.parentNode.getAttribute("dataHBID");
          let parentHongBaoTitle = e.target.parentNode.getAttribute("datahbtitle");
          let hongBaoOrg = e.target.parentNode.getAttribute("datahbnickname");
          let hongbaoData = {
            "crtTime": "",
            "handoutTime": "",
            "icon": "",
            "money": "",
            "orderNo": parentHongBaoID,
            "packetStatus": "",
            "payerOrg": hongBaoOrg,
            "redNum": "",
            "roomId": "",
            "title": parentHongBaoTitle,
            "zbAct": "",
          }
          this.$emit('formChildMsg', {
            type: 'clickMessageLiHbData',
            data: {
              'hbData': hongbaoData
            }
          })
          e.target.parentNode.className = "hongbaohtml1";
        }else if (e.target.nodeName.toLowerCase() =='div' && e.target.className== 'connect-boxText' ){
					let {target:{innerText,previousElementSibling}} = e;
					let  message = innerText;
					let  cssTreeNodeArray = previousElementSibling.children[1];
					let name;
					if(cssTreeNodeArray.className==='nikeNameRuan'){
						name = cssTreeNodeArray.innerText
					}else{
						let  cssTreeNodeArray = previousElementSibling.children[0];
						name = cssTreeNodeArray.innerText
					}
					this.$emit('formChildMsg', {
						type: 'reportMsgData',
						data: {
						 name,
						 message	
						}
					})
        }
      },
      establishDom(item) {
        this.isNoComment = false; //沙发图
        //			<li class="msg-li-li">
        //				<div class="li-msg-left">
        //					<img onerror="imgError()" src="../../../../../static/logo-w.png">
        //				</div>
        //				<div class="li-msg-right">
        //					<p class="nickBox"><span class="nikeNameRuan">游客1234</span><span class="liveTimeRuan">09-24  17:58</span></p>
        //					<div class="connect-boxText">精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频</div>
        //				</div>
        //			</li>
        let liSum = this.$refs.msgContent.children;
        if (liSum.length > 100) {
          this.$refs.msgContent.removeChild(liSum[liSum.length - 1])
        }
        let li = document.createElement("li");
        li.className = "msg-li-li";
        let leftBox = document.createElement("div");
        leftBox.className = "li-msg-left";
        let img = document.createElement("img");
        if (this.roomId == "4335" || this.roomId == "4336" || this.roomId == "4350" || this.roomId == "4351" || this
          .roomId == "4353" || this.roomId == "4369" || this.roomId == "1623" || this.roomId == "4512" || this.roomId ==
          "4513" || this.roomId == "4515" || this.roomId == "4516" || this.roomId == "4517") { //民生银行固定直播间固定头像
          img.src = msyhUnify;
        } else {
          img.src = item.avator && item.avator != null && item.avator;
        }
        img.onerror = window.imgError
        leftBox.appendChild(img);
        li.appendChild(leftBox);
        let rightBox = document.createElement("div");
        rightBox.className = "li-msg-right";
        let p = document.createElement("p");
        p.className = "nickBox";
        if(item.un == this.roomInfo.roomInfo.anchor){
          let span0 = document.createElement("span");
          span0.className = "officialRuan";
          span0.innerText = '官方';
          p.appendChild(span0);
        }
        
        let span1 = document.createElement("span");
        span1.className = "nikeNameRuan";
        if (this.roomId == "4335" || this.roomId == "4336" || this.roomId == "4350" || this.roomId == "4351" || this
          .roomId == "4353" || this.roomId == "4369" || this.roomId == "1623" || this.roomId == "4512" || this.roomId ==
          "4513" || this.roomId == "4515" || this.roomId == "4516" || this.roomId == "4517") { //民生银行固定直播间固定昵称
          span1.innerText = '顶顶';
        } else {
          span1.innerText = item.un == this.roomInfo.roomInfo.anchor ?'主播':item.nickName;
        }
        let span2 = document.createElement("span");
        span2.className = "liveTimeRuan";
        span2.innerText = item.addTime;
        p.appendChild(span1);
        p.appendChild(span2);
        rightBox.appendChild(p);
        let contentBox = document.createElement("div");
        contentBox.className = "connect-boxText";
        contentBox.innerText = fun.searchIphoneNum(item.message);
        rightBox.appendChild(contentBox);
        li.appendChild(rightBox);
        if (item.un == this.currentUn) {
          li.className = "msg-li-li highlight-me";
          let spanMy = document.createElement("span");
          spanMy.className = "my-tip";
          spanMy.innerText = '我';
          p.insertBefore(spanMy, span2)
        }
        this.$refs.msgContent.insertBefore(
          li,
          this.$refs.msgContent.childNodes[0]
        );
      },
      // 官方小助手IM
      establishOfficalDom(item) {
        this.isNoComment = false; //沙发图
        let li = document.createElement("li");
        li.className = "msg-li-li";
        let leftBox = document.createElement("div");
        leftBox.className = "li-msg-left";
        let img = document.createElement("img");
        img.src = item.fromAccountHeadurl || imgError;
        img.onerror = window.imgError
        leftBox.appendChild(img);
        li.appendChild(leftBox);
        let rightBox = document.createElement("div");
        rightBox.className = "li-msg-right";
        let p = document.createElement("p");
        p.className = "nickBox";
        let span0 = document.createElement("span");
        span0.className = "officialRuan";
        if (this.roomInfo.roomInfo.channel === "gdyh2") span0.classList.add('officialRuanGdyh2');
        span0.innerText = '官方';
        let span1 = document.createElement("span");
        span1.className = "nikeNameRuan";
        span1.innerText = item.fromAccountNick || '';
        let span2 = document.createElement("span");
        span2.className = "liveTimeRuan";
        let getTime = item.time || new Date().getTime() / 1000
        let times = this.timeFormat(getTime * 1000)
        span2.innerText = times;
        p.appendChild(span0);
        p.appendChild(span1);
        p.appendChild(span2);
        rightBox.appendChild(p);
        let contentBox = document.createElement("div");
        contentBox.className = "connect-boxText";
        contentBox.innerText = JSON.parse(item.elems[0].content.data).content;
        rightBox.appendChild(contentBox);
        li.appendChild(rightBox);
        this.$refs.msgContent.insertBefore(
          li,
          this.$refs.msgContent.childNodes[0]
        );
      },
      // 官方小助手IM回复
      imReplyMsg(item) {
        this.isNoComment = false; //沙发图
        let li = document.createElement("li");
        li.className = "msg-li-li";
        let leftBox = document.createElement("div");
        leftBox.className = "li-msg-left";
        let img = document.createElement("img");
        img.src = item.avator && item.avator != null && item.avator || imgError;;
        img.onerror = window.imgError;
        leftBox.appendChild(img);
        li.appendChild(leftBox);
        let rightBox = document.createElement("div");
        rightBox.className = "li-msg-right";
        let p = document.createElement("p");
        p.className = "nickBox";
        let span0 = document.createElement("span");
        span0.className = "officialRuan";
        if (this.roomInfo.roomInfo.channel === "gdyh2") span0.classList.add('officialRuanGdyh2');
        span0.innerText = '官方';
        let span1 = document.createElement("span");
        span1.className = "nikeNameRuan";
        span1.innerText = item.nickName;
        let span2 = document.createElement("span");
        span2.className = "liveTimeRuan";
        span2.innerText = item.addTime;
        p.appendChild(span0);
        p.appendChild(span1);
        p.appendChild(span2);
        rightBox.appendChild(p);
        let contentBox = document.createElement("div");
        contentBox.className = 'connect-boxText'
        contentBox.className = "connect-boxText";
        let replyBox = document.createElement("p");
        replyBox.className = "reply-box";
        let replyName = document.createElement("span");
        replyName.className = "reply-name";
        replyName.innerHTML = '@' + item.parent.nickName;
        let replyMsg = document.createElement("span");
        replyMsg.className = "reply-msg";
        replyMsg.innerHTML = item.message;
        let repliedBox = document.createElement("div");
        repliedBox.className = "replied-box";
        let repliedInfo = document.createElement("p");
        repliedInfo.className = "replied-info";
        let repliedName = document.createElement("span");
        repliedName.className = "replied-name";
        repliedName.innerHTML = item.parent.nickName;
        let repliedTime = document.createElement("span");
        repliedTime.className = "replied-time";
        repliedTime.innerHTML = item.parent.addTime;
        let repliedMsg = document.createElement("p");
        repliedMsg.className = "replied-msg";
        repliedMsg.innerHTML = item.parent.message;;
        replyBox.appendChild(replyName)
        replyBox.appendChild(replyMsg)
        repliedInfo.appendChild(repliedName)
        repliedInfo.appendChild(repliedTime)
        repliedBox.appendChild(repliedInfo)
        repliedBox.appendChild(repliedMsg)
        contentBox.appendChild(replyBox);
        contentBox.appendChild(repliedBox);
        rightBox.appendChild(contentBox);
        li.appendChild(rightBox);
        this.$refs.msgContent.insertBefore(
          li,
          this.$refs.msgContent.childNodes[0]
        );
      },
      //时间戳转化成时间格式
      timeFormat(timestamp) {
        var time = new Date(timestamp);
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        return year + '-' + this.add0(month) + '-' + this.add0(date) + ' ' + this.add0(hours) + ':' + this.add0(
          minutes) + ':' + this.add0(seconds);
      },
      add0(m) {
        return m < 10 ? '0' + m : m
      },

      formChildData(data) { //子组件传过来的数据
        switch (data.type) {
          case 'sendImNotice': //im消息
            this.$emit('formChildMsg', { //im消息
              type: 'sendImNotice',
              data: {
                'tmpMsg': data.data.tmpMsg
              }
            })
            break;
          case 'sendGSYH': //工商银行游客自嗨消息
            let msg = {
              "addTime": fun.getTime(),
              "anchor": this.roomInfo.roomInfo.anchor,
              "avator": imgTx,
              "channel": this.roomInfo.roomInfo.channel,
              "id": null,
              "message": data.data.tmpMsg,
              "nickName": this.$store.state.userInfo.nickname,
              "roomId": this.roomId,
              "sceneId": this.roomInfo.roomInfo.sid,
              "type": 0,
              "un": this.$store.state.userInfo.un,
              "vType": null
            }
            this.establishDom(msg)
            break;
          case 'inputFocus': //im消息
            this.$emit('formChildMsg', {
              type: 'inputFocus',
              data: 'input获取焦点'
            })
            break;
          case 'isPublicShow': //im消息
            this.$emit('formChildMsg', {
              type: 'isPublicShow',
              data: {
                'Msg': '公开不限制直播间'
              }
            })
            break;
          default:
            break;
        }
      },
      getRoomComment() { //留言
        this.$http.get("/h5live/historyMessage?roomId=" + this.roomId + "&id=" + this.pageId + "&page=" + this
          .fenYePage).then(
          res => {
            let msgHtml = "";
            if (res.data.code == "000000") {
              let _this = this;
              let dataMsg = res.data.data.msg.items;
              _this.totalPage = res.data.data.msg.totalPage;
              // "enableRiskWarn":0 -关闭 1 开启
              let {
                enableRiskWarn,
                riskWarnMsg
              } = _this.roomInfo.zbRiskWarn
              if (enableRiskWarn == 1) {
                let riskTip = {
                  'type': 'riskWarn',
                  'enableRiskWarn': enableRiskWarn,
                  'avator': _this.sysInfo.icon,
                  'nickName': _this.sysInfo.name,
                  'message': _this.isTencentLive? _this.riskWarnTencent :riskWarnMsg//如果是腾讯创建的直播间，使用riskWarnTencent
                }
                dataMsg.unshift(riskTip)
              }
              if (dataMsg.length == 0) {
                _this.isNoComment = true;
              } else {
                if (dataMsg[0].id) {
                  _this.pageId = dataMsg[0].id;
                }
                let messageHtml = "";

                //type 0是留言  1是点赞  2是红包  3是答题  4是问卷  5是投票  6小助手回复  7送礼    riskWarn：风险提示
                dataMsg.forEach(function(ele, index) {
                  let myMsg = '';
                  let highlightMe = '';
                  if (ele.un == _this.currentUn) {
                    myMsg = '<span class="my-tip">我</span>'
                    highlightMe = 'highlight-me'
                  }
                  let liveTx = '';
                  let msyhNickName = ''
                  if (_this.roomId == "4335" || _this.roomId == "4336" || _this.roomId == "4350" || _this
                    .roomId == "4351" || _this.roomId == "4353" || _this.roomId == "4369" || _this.roomId ==
                    "1623" || _this.roomId == "4512" || _this.roomId == "4513" || _this.roomId == "4515" || _this
                    .roomId == "4516" || _this.roomId == "4517") { //民生银行固定直播间固定头像
                    liveTx = `<img src=${msyhUnify}>`
                    msyhNickName = '顶顶'
                  } else {
                    liveTx =
                      `<img onerror="imgError()" src=${ele.avator && ele.avator!=null && ele.avator  || imgTx}>`
                    msyhNickName = ele.nickName
                  }
                  if (ele.type == 'riskWarn') { //风险提示
                    messageHtml =
                      `<li class="msg-li-li"><div class="li-msg-left"><img onerror="imgError()" src=${ele.avator || imgTx}></div><div class="li-msg-right"><p class="nickBox"><span class="nikeNameRuan">${ele.nickName}</span></p><div class="connect-boxText risk-warm">${ele.message}</div></div></li>`

                  } else if (ele.type == 1) { //点赞消息
                    messageHtml = `<li class="msg-li-li ${highlightMe}">
										                     <div class="li-msg-left">
										                         ${liveTx}
										                      </div>
										                      <div class="li-msg-right">
										                          <p class="nickBox">
										                              <span class="nikeNameRuan">${msyhNickName}</span>
										                              ${myMsg}
										                              <span class="liveTimeRuan">${ele.addTime}</span>
										                           </p>
										                            <div class="connect-boxText nick-name">送出了${ele.message}个赞</div>
										                       </div>
										                 </li>`;
                  } else if (ele.type == '2') { //红包
                    //messageHtml= `<div class="hongbaohtml" datahbid="${JSON.parse(ele.message).packetNo}" datahbtitle="${JSON.parse(ele.message).packetDesc}"><p class="pTitleClass">${JSON.parse(ele.message).packetDesc}</p></div>`
                    messageHtml = `<li class="msg-li-li">
														<div class="li-msg-left">
															<img onerror="imgError()" src=${ele.avator && ele.avator!=null && ele.avator  || imgTx}>
														</div>
														<div class="li-msg-right">
															<p class="nickBox">
															   <span class="nikeNameRuan">${ele.nickName}</span>
															   <span class="liveTimeRuan">${ele.addTime}</span>
															</p>
															<div class="connect-boxText">
																<div class="hongbaohtml" datahbnickname="${ele.nickName}" datahbid="${JSON.parse(ele.message).packetNo}" datahbtitle="${JSON.parse(ele.message).packetDesc}">
																	<p class="pTitleClass">${JSON.parse(ele.message).packetDesc}</p>
																</div>
															</div>
														</div>
													</li>`
                  } else if (ele.type == '3') {
                    //messageHtml = '<div class="connect-boxText"><div class="HDClass">提交了答题~ <div class="HDimg classDT"></div></div></div>'
                  } else if (ele.type == '4') {
                    //messageHtml = '<div class="connect-boxText"><div class="HDClass">提交了问卷~ <div class="HDimg classWJ"></div></div></div>'
                  } else if (ele.type == '5') {
                    //messageHtml = '<div class="connect-boxText"><div class="HDClass">已投票成功~ <div class="HDimg classTP"></div></div></div>'
                  } else if (ele.type == '7') { //送礼
                    messageHtml = `<li class="msg-li-li ${highlightMe}">
										                  <div class="li-msg-left">
										                     ${liveTx}
										                  </div>
										                  <div class="li-msg-right">
										                     <p class="nickBox">
										                       <span class="nikeNameRuan">${msyhNickName}</span>
										                       ${myMsg}
										                       <span class="liveTimeRuan">${ele.addTime}</span>
										                     </p>
										                     <div class="connect-boxText"><i style="color:#eb5a6a">${ele.message}</i></div>
										                  </div>
										                 </li>`
                  } else if (ele.type == '6') {
                    //if (_this.isJSON(ele.message)) {
                    let itemEle = JSON.parse(ele.message.replace(/\n/g, "\\n").replace(/\r/g, "\\r"))
                    messageHtml =
                      `<li class="msg-li-li"><div class="li-msg-left"><img onerror="imgError()" src=${ele.avator && ele.avator!=null && ele.avator || imgTx}></div><div class="li-msg-right"><p class="nickBox"><span class="${_this.roomInfo.roomInfo.channel === "gdyh2" ? "officialRuan officialRuanGdyh2" : "officialRuan"}">官方</span><span class="nikeNameRuan">${ele.nickName}</span><span class="liveTimeRuan">${ele.addTime}</span></p><div class="connect-boxText"><p class="reply-box"><span class="reply-name">@${itemEle.parent.nickName}</span><span class="reply-msg">${itemEle.msg}</span></p><div class="replied-box"><p class="replied-info"><span class="replied-name">${itemEle.parent.nickName}</span><span class="replied-time">${itemEle.parent.addTime}</span></p><p class="replied-msg">${itemEle.parent.message}</p></div></div></div></li>`
                    // }
                  } else { // 普通消息
                    messageHtml = `<li class="msg-li-li ${highlightMe}">
										                  <div class="li-msg-left">
										                       ${liveTx}
										                  </div>
											              <div class="li-msg-right">
											                 <p class="nickBox">
											                    <span ${(ele.un && (ele.un.includes('zbzlpt') || ele.un == _this.roomInfo.roomInfo.anchor)) ? ("class=" + (_this.roomInfo.roomInfo.channel === "gdyh2" ? "'officialRuan officialRuanGdyh2'" : "'officialRuan'")) : 'class="officialRuan-hidden"'}>官方</span>
											                    <span class="nikeNameRuan">${ele.un == _this.roomInfo.roomInfo.anchor?'主播':msyhNickName}</span>
											                    ${myMsg}<span class="liveTimeRuan">${ele.addTime}</span>
											                 </p>
											                  <div class="connect-boxText">${fun.searchIphoneNum(ele.message)}</div>
											               </div>
											            </li>`

                  }
                  msgHtml += messageHtml;
                });

              }

              _this.$refs.msgContent.innerHTML = msgHtml;
            }
          },
          err => {
            console.log(err);
          }
        );
      },
      // 是否是json
      isJSON(str) {
        if (typeof str == 'string') {
          try {
            var obj = JSON.parse(str);
            if (typeof obj == 'object' && obj) {
              return true;
            } else {
              return false;
            }

          } catch (e) {
            return false;
          }
        }
      },

      //置顶留言 展开 收起
      clickToggle() {
        if (this.isEllipsis) {
          this.isShow = !this.isShow
          let topMsg = document.getElementById('live-top-msg')
          if (this.isShow) {
            topMsg.innerHTML = this.roomInfo.roomInfo.topWord
          } else {
            topMsg.innerHTML = this.topMsgText
          }
        }
      },
      //置顶留言展示省略号
      topMsgStyle() {
        let liveTop = document.getElementById('live-top-msg');
        let liveTopText = liveTop.innerHTML; //获取内容
        let currentContentHeight = liveTop.clientHeight; //获取内容当前的高度
        if (currentContentHeight > 42) { //两行内容高度
          for (let i = 0; currentContentHeight > 42; i++) {
            liveTopText = liveTopText.substring(0, liveTopText.length - 1);
            liveTop.innerHTML = liveTopText;
            currentContentHeight = liveTop.clientHeight;
          }
          //得到正好符合高度的字符 删除最后一个变为省略号 填充在页面里
          let newText = liveTopText.substring(0, liveTopText.length - 1);
          if (newText.indexOf('**群')) {
            let currentText = newText.replace("群", "");
            this.topMsgText = currentText;
          } else {
            this.topMsgText = newText
          }
          this.isEllipsis = true
        }
        liveTop.innerHTML = this.isShow ? this.roomInfo.roomInfo.topWord : this.topMsgText
      },

    }
  }
</script>

<style scoped="scoped">
  .msg-content-class>>>.highlight-me {
    background: rgba(227, 231, 255, 0.39);
  }

  .live-msg-box {
    width: 100%;
    height: calc(100vh - 664px);
    padding-bottom: 100px;
    overflow-y: scroll;
  }

  .live-msg-box-zyzq {
    width: 100vw;
    height: calc(100vh - 744px);
    background: white;
    overflow-y: scroll;
  }

  .live-msg-box-zgrs {
    width: 100vw;
    height: calc(100vh - 604px);
    background: white;
    overflow-y: scroll;
  }

  .no-nav {
    width: 100vw;
    height: calc(100vh - 626px);
    background: white;
    overflow-y: scroll;
  }

  .no-nav-zxyh {
    width: 100vw;
    height: calc(100vh - 654px);
    background: white;
    overflow-y: scroll;
  }

  .no-nav-zyzq {
    width: 100vw;
    height: calc(100vh - 674px);
    background: white;
    overflow-y: scroll;
  }
  .msg-content-class{
	  padding-bottom: 50px;
  }
  .msg-content-class li {
    /*margin-top: 10px;*/
    width: 100%;
    height: auto;
    /*background: #0086B3;*/
  }

  /*直播间改造留言区域css*/

  .msg-content-class>>>.msg-li-li {
    display: flex;
    padding: 0 20px;
  }

  .msg-content-class>>>.msg-li-li .li-msg-left {
    width: 70px;
    /*background: pink;*/
  }

  .msg-content-class>>>.msg-li-li .li-msg-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    /*background: salmon;*/
  }

  .msg-content-class>>>.msg-li-li .li-msg-left img {
    width: 70px;
    height: 70px;
    margin: 10px 0 0 0;
    background-position: 70px 70px;
    border-radius: 100%;
    border: 2px solid #ebebeb;
  }

  .msg-content-class>>>.nickBox {
    color: #9da2a5;
    font-size: 28px;
    margin: 10px 0 0 20px;
    /*background: pink;*/
    display: flex;
    align-items: center;
    flex: 1;
  }

  .msg-content-class>>>.nikeNameRuan {
    max-width: 275px;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .msg-content-class>>>.my-tip {
    display: inline-block;
    background: linear-gradient(-30deg, #148EE3, #29D0EE);
    border-radius: 6px;
    line-height: normal;
    padding: 2px 10px 3px;
    text-align: center;
    color: white;
    font-size: 20px;
    margin-left: 10px;
  }

  .reply-nick-box .reply-name {
    font-size: 24px;
    color: #8A8B8C;
    ;
  }

  .msg-content-class>>>.liveTimeRuan {
    font-size: 22px;
    color: #cbcccb;
    margin-left: 20px;
  }

  .msg-content-class>>>.connect-boxText {
    flex: 1;
    margin: 10px 0 0 20px;
    font-size: 28px;
    color: #0c0c0c;
    text-align: justify;
    line-height: 36px;
    word-wrap: break-word;
    word-break: break-all;
    width: fit-content;
  }

  .msg-content-class>>>.risk-warm {
    color: #6d6d6d;
  }

  .sysInfo-ul li {
    display: flex;
    padding: 0 20px;
  }

  .sysInfo-ul li .nickBox {
    color: #9da2a5;
    font-size: 28px;
    margin: 10px 0 0 20px;
    /*background: pink;*/
    display: flex;
    align-items: center;
    flex: 1;
  }

  .sysInfo-ul .liveTimeRuan {
    font-size: 22px;
    color: #cbcccb;
    margin-left: 20px;
  }

  .sysInfo-ul .li-msg-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .sysInfo-ul .connect-boxText {
    flex: 1;
    margin: 10px 0 0 20px;
    font-size: 28px;
    color: #0c0c0c;
    text-align: justify;
    line-height: 30px;
    word-wrap: break-word
  }

  .sysInfo-ul .li-msg-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .sysInfo-ul li img {
    width: 70px;
    height: 70px;
    margin: 10px 0 0 0;
    background-position: 70px 70px;
    border-radius: 100%;
    border: 2px solid #ebebeb;
  }

  #live-red {
    /*display: flex;
		align-items: flex-end;*/
    position: relative;
    color: black;
    text-align: justify;
    line-height: 36px;
    word-break: break-all;
  }

  /*#live-red .main-content{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical
	}*/

  #live-red>>>a {
    color: inherit;
  }

  #comment-imgicon {
    width: 48px;
    height: 40px;
    display: block;
    background: url(../../../../assets/images/icon.png);
    background-size: 120px 250px;
    background-position: -0px -150px;
    margin: 0 0 0 10px;
  }

  /* 回复 */

  .msg-content-class>>>.officialRuan {
    display: inline-block;
    width: 70px;
    background: linear-gradient(180deg, #FE807F 0%, #FF3338 100%);
    border-radius: 6px;
    line-height: normal;
    padding: 2px 0 3px;
    text-align: center;
    color: white;
    font-size: 22px;
    margin-right: 6px;
  }

  .msg-content-class>>>.officialRuanGdyh2 {
    background: linear-gradient(180deg, #AB5BEA 0%, #732ED0 100%);
  }

  .msg-content-class>>>.officialRuan-hidden {
    display: none;
  }

  .msg-content-class>>>.reply-name {
    color: #CB3537;
    font-size: 28px;
    margin-right: 7px;
  }

  .msg-content-class>>>.replied-box {
    background: #F7F7F7;
    margin-top: 17px;
    padding: 20px 10px 20px 30px;
  }

  .msg-content-class>>>.replied-box .replied-name {
    font-size: 24px;
    color: #8A8B8C;
  }

  .msg-content-class>>>.replied-box .replied-time {
    color: #CBCBCB;
    font-size: 20px;
    margin-left: 20px;
  }

  .msg-content-class>>>.replied-box .replied-msg {
    color: #8A8B8C;
    margin-top: 10px;
    font-size: 24px;
    line-height: 30px;
    word-wrap: break-word;
    word-break: break-all;
  }

  .msg-content-class>>>.nick-name {
    flex: 1;
    margin: 10px 0 0 20px;
    font-size: 28px;
    color: gold;
    text-align: justify;
    line-height: 30px;
    word-wrap: break-word
  }

  .msg-content-class>>>.hongbaohtml {
    width: 370px;
    height: 108px;
    background: salmon;
    background: url(../../../../assets/images/hongbaobg.png) no-repeat;
    background-size: 370px 108px;
    display: flex;
  }

  .msg-content-class>>>.hongbaohtml1 {
    width: 370px;
    height: 108px;
    background: salmon;
    background: url(../../../../assets/images/hongbaobg1.png) no-repeat;
    background-size: 370px 108px;
    display: flex;
  }

  .msg-content-class>>>.pTitleClass {
    font-size: 26px;
    color: #f5efe3 !important;
    margin: 20px 0 0 98px;
  }

  .msg-content-class>>>.pTitleClass1 {
    font-size: 26px;
    color: #ffffff !important;
    margin: 20px 0 0 90px;
  }

  .no-comment-box {
    width: 100%;
    height: calc(100vh - 820px);
    display: flex;
    align-items: center;
  }

  .no-comment {
    width: 100%;
    height: 200px;
    background: url(../../../../assets/images/shafa.png) no-repeat top center;
    background-size: 369px 169px;
  }

  .icon-box {
    position: absolute;
    right: 0;
    bottom: -5px;
  }

  .iconfont.iconspread-line,
  .iconfont.iconshouqi-copy {
    margin-left: 10px;
    font-size: 32px;
    color: #cc3538;
    font-weight: bold;
  }

  .report-box {
    /* border: 2px blue solid; */
    /* width: 200px; */
    height: 77px;
    position: absolute;
    border-radius: 8px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 29px 0 24px;
    top: 10px;
    left: 120px;
    z-index: 1502;
  }

  .report-box::before {
    content: '';
    width: 0;
    height: 0;
    border: 14px solid;
    position: absolute;
    top: 12px;
    left: -24px;
    z-index: 1502;
    border-color: transparent transparent white;
    transform: rotate(-90deg);
  }

  /*  .report-box::after{
    content: '';
    width: 0;
    height: 0;
    border: 20px solid;
    position: absolute;
    top: -38px;
    left: 20px;
    border-color:  transparent transparent white;
  } */
  .report-box p {
    font-size: 30px;
    font-weight: 400;
    color: #333333;
    margin-right: 18px;
  }

  .report-box img {
    width: 36px;
    height: 36px;
  }

  .report-img {
    width: 70px;
    height: 70px;
    background-position: 70px 70px;
    border-radius: 100%;
    border: 2px solid #ebebeb;
    position: absolute;
    left: 20px;
    top: 9px;
    z-index: 1503;
  }
  /* 快捷消息回复 */
  .quick-message{
    width: calc( 100% - 140px );
    /* height: 34px; */
    padding: 5px 20px 0;
    margin-bottom: 1px;
    padding-left: 30px;
    overflow-x: scroll;
    overflow-y: hidden;
    z-index: 13;
    position: absolute;
    bottom: 103px;
    left: 0;
    background: #FFFFFF;
  }
  .quickMessage-zxjtqh-ios{
    bottom: 103px;
  }
  .land-live-msg{
    /* position: absolute; */
    position: relative;
    flex: 1;
    display: flex;
  }
  .middle-nav-box + .land-live-msg .quick-message{
    bottom: 103px;
  }
  .middle-nav-box + .land-live-msg .quickMessage-zxjtqh-ios{
    bottom: 103px;

  }
  .quick-message ul{
    /* height: 34px; */
    white-space:nowrap;
    overflow-x: scroll;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .quick-message ul li{
    /* height: 36px; */
    display: inline-block;
    /* background: rgba(255, 255, 255, 0.1); */
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #666666;
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    text-align: center;
    padding: 6px 10px 5px 11px;
  }
  .quick-message ul li:not(:nth-child(1)){
    margin-left: 15px;
  }
</style>
